<template>

  <el-menu :default-active="toIndex" mode="horizontal" @select="handleSelect" class="el-menu-header">
    <el-menu-item v-for="(item, index) in menuList" :index="item.path" :key="index">
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import { actionsTypes } from '../../store'
export default {
  data() {
    return {
      menuList: [    // 水平一级菜单栏的菜单
        // { path: '/project', title: '项目管理' },
        // { path: '/jobs', title: '任务管理' },
        // { path: '/schedules', title: '调度管理' },
        // { path: '/nodes', title: '算子管理' },
        // { path: '/resource', title: '资源管理' },
        // { path: '/systemSetting', title: '系统设置' }
      ]
    }
  },
  computed: {
    ...mapState({
      isTrial: state => state.global.is_trial,
      is_scheduler_enabled: state => state.global.is_scheduler_enabled,
      userRoutes: state => state.user.userRoutes
    }),
    activeIndex() {
      return this.$route.meta.menuIndex
    },
    toIndex() {  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
      return '/' + this.$route.path.split('/')[1];
    }
  },
  watch: {
    userRoutes: {
      handler(n, v) {
        const menus = [
          { path: '/project', title: '项目管理' },
          { path: '/jobs', title: '任务管理' },
          { path: '/schedules', title: '调度管理' },
          { path: '/nodes', title: '算子管理' },
          { path: '/resource', title: '资源管理' },
          // { path: '/systemSetting', title: '系统设置' }
        ];
        let temp = menus.filter(i => {
          return n.find(j => j.path === i.path)
        })
        this.menuList = temp
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    ...mapMutations({
      resetLoadedCellList: actionsTypes.RESET_LOADED_CELL_LIST
    }),
    handleSelect(path) {  // 切换菜单栏
      this.$router.push({
        path: path
      });
    }
  }
}
</script>
<style lang="scss">
.el-menu--horizontal {
  &.el-menu-header {

    .el-menu-item:not(.is-disabled):focus,
    .el-menu-item:not(.is-disabled):hover,
    .el-submenu .el-submenu__title:hover {
      background-color: rgb(8, 69, 125);
      outline: 0;
      color: $--color-white;
    }

    >.el-menu-item {
      height: $page-header-height;
      line-height: $page-header-height;
      background-color: $--color-nav;
      color: $--color-white;

      &.is-active {
        color: $--color-white;
        border-bottom: 4px solid $pattern-blue-400;
      }

      .menu-icon {
        font-size: 24px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}
</style>
